<template>
  <el-sub-menu v-if="props.item.children?.length" :index="props.item.name">
    <template #title>
      <el-icon v-if="props.item.icon">
        <component :is='props.item.icon'></component>
      </el-icon>
      {{props.item.title}}
    </template>
      <MenuItem v-for="items in  props.item.children" :item="items" ></MenuItem>
  </el-sub-menu>
  <el-menu-item v-else :index="props.item.name">
    <el-icon v-if="props.item.icon">
      <component :is='props.item.icon'></component>
    </el-icon>
    {{props.item.title}}
  </el-menu-item>
</template>

<script setup lang="ts" name="">
import type { menu } from "/@/store/modules/types"
import MenuItem from "/@/layouts/default/menus/item/index.vue"

interface Props {
  item: menu;
}

const props = withDefaults(defineProps<Props>(), {
});


</script>

<style scoped lang="less">

</style>